<template>
  <div class="permission">
    <el-radio-group v-model="role" @change="onchange">
      <el-radio-button label="admin">admin</el-radio-button>
      <el-radio-button label="editor">editor</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { mapActions } from 'vuex'
  export default {
    data: function () {
      return {
        role: ''
      }
    },
    mounted: function(){
      this.role = this.token
    },
    computed: {
      ...mapGetters([ 'token' ])
    },
    methods: {
      ...mapActions(['changeRole']),
      onchange: function (role) {
        this.changeRole(role)
          .then(()=>{
            this.$router.push('/')
          })
          .catch(error=>{
            console.log(`permission>onchange>${error}`)
          })
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .permission{
    padding: 60px;
  }
</style>
